<template>
  <div class="app-container">
    <div class="container-header">
      <!--  <img src="../../../assets/icon1.png" alt=""> <span class="header-title">{{deptName?deptName:"管理员"}}</span> -->
      日期： <el-date-picker size="small"
        v-model="selectDate" type="date" @change="bindSelectDate" placeholder="请选择" />
    </div>
    <el-collapse v-model="activeName" accordion @change="bindChangeAccordion" >
      <el-collapse-item :name="i+1" v-for="(opt,i) in activeList" :key="i" v-hasPermi="['system:'+lowercaseFirst(opt.interface)+':list']">
        <template #title>
          <span class="accordion-title"> {{opt.title}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
            :class="statusArr.includes(opt.title)?'text-green':'text-orange'" v-if="i==0">{{statusArr.includes(opt.title)?'已上报':'待上报'}}</span>
        </template>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center '}" show-overflow-tooltip>
          <el-table-column type="index" label="序号"></el-table-column>
          <template v-for="(item,index) in goOutContent">
            <el-table-column :label="item.title" v-if="item.children" align="center">
              <template v-for="(element) in item.children">
                <el-table-column :prop="element.prop" :label="element.title">
                  <template #default="scope">
                    <el-input v-model="scope.row[element.prop]" placeholder="请输入" input-style="textAlign:center" @input="bindChangeRoutine($event,element.prop,scope.$index)"
                      class="inputDeep"  />
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
            <el-table-column :prop="item.prop" :label="item.title" align="center" :width="item.width" v-else>
              <template #default="scope">
                <el-input v-model="scope.row[item.prop]" placeholder="请输入"  @input="bindChangeRoutine($event,item.prop,scope.$index)" class="inputDeep" input-style="textAlign:center" v-if="item.prop!='date'&&item.prop!='enTime'" />
                <el-date-picker size="small" style="width: 100%;" class="datePicker"  v-model="scope.row[item.prop]" type="date"  placeholder="请选择" v-if="item.prop=='date'||item.prop=='enTime'" />
              </template>
            </el-table-column>
          </template>
          <el-table-column prop="index" label="操作" width="50">
            <template #default="scope">
              <el-button link size="small" @click.prevent="deleteRow(scope.$index)" v-hasPermi="['system:'+lowercaseFirst(opt.interface)+':remove']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- type="warning"  -->
        <el-button class="mt-4" style="width: 100%" @click="onAddItem">
          新增一行
        </el-button>

        <div class="submit">
          <el-button type="primary" @click="bindSubmit" v-hasPermi="['system:'+lowercaseFirst(opt.interface)+':add']">提交</el-button>
        </div>
      </el-collapse-item>

    </el-collapse>
  </div>
</template>
  
<script setup name="User">
import moment from 'moment'
import {
  selectTbTicketClearList, insertTbTicketClear, updateTbTicketClear, deleteTbTicketClearById, selectTbTicketLoseCpcList, insertTbTicketLoseCpc, updateTbTicketLoseCpc, deleteTbTicketLoseCpcById, selectTbTicketMicrocomputerList,
  insertTbTicketMicrocomputer, updateTbTicketMicrocomputer, deleteTbTicketMicrocomputerById, selectTbTicketPaperList, insertTbTicketPaper, updateTbTicketPaper, deleteTbTicketPaperById, selectTbTicketRecycleList, insertTbTicketRecycle,
  updateTbTicketRecycle, deleteTbTicketRecycleById, selectTbTicketSurplusList, insertTbTicketSurplus, updateTbTicketSurplus, deleteTbTicketSurplusById, selectTbTicketMediumList, insertTbTicketMedium, updateTbTicketMedium, deleteTbTicketMediumById
} from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'
import config from "./config"

const { proxy } = getCurrentInstance();

const methods = ref({
  selectTbTicketClearList, insertTbTicketClear, updateTbTicketClear, deleteTbTicketClearById, selectTbTicketLoseCpcList, insertTbTicketLoseCpc, updateTbTicketLoseCpc, deleteTbTicketLoseCpcById, selectTbTicketMicrocomputerList,
  insertTbTicketMicrocomputer, updateTbTicketMicrocomputer, deleteTbTicketMicrocomputerById, selectTbTicketPaperList, insertTbTicketPaper, updateTbTicketPaper, deleteTbTicketPaperById, selectTbTicketRecycleList, insertTbTicketRecycle,
  updateTbTicketRecycle, deleteTbTicketRecycleById, selectTbTicketSurplusList, insertTbTicketSurplus, updateTbTicketSurplus, deleteTbTicketSurplusById, selectTbTicketMediumList, insertTbTicketMedium, updateTbTicketMedium, deleteTbTicketMediumById
})

const userStore = useUserStore()
const activeName = ref('1')
const activeList = ref([{ title: '现金通行介质使用情况日清表', interface: 'Medium' }, { title: '出口回收非正常CPC卡明细表', interface: 'Recycle' }, { title: '无CPC卡车辆统计表', interface: 'LoseCpc' },
{ title: 'CPC卡盈余卡回收登记表', interface: 'Surplus' },
{ title: '非正常CPC卡清卡登记表', interface: 'Clear' }, { title: '纸质通行券使用情况明细表', interface: 'Paper' }, { title: '微机票使用情况登记表', interface: 'Microcomputer' }]) //
// const postData = ref([{}])
const selectDate = ref()//日期
const ticketName = ref("现金通行介质使用情况日清表")
const statusArr = ref([])
const deptName = ref()
const activeNum = ref(5)
const queryParams = ref({ date: '', deptId: '' })
const tableData = ref([{}])
const goOutContent = ref([])
const activeIndex = ref(0)
const editList = ref([]) //编辑id
const isEdit = ref(false)




/** 查询列表 */
function getList(abutment, date) {
  if (date) {
    queryParams.value.date = date
  }
  methods.value[abutment](queryParams.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length > 0) {
      tableData.value = res.rows;
      if(abutment=='selectTbTicketMediumList'){
        statusArr.value.push('现金通行介质使用情况日清表')
      }
    } else {
      tableData.value = [{}]
    }

  });
};


const bindChangeAccordion = (val) => {
  if (!val) {
    return;
  }
  if (isEdit.value) {
    ElMessageBox.confirm('您修改的数据尚未保存,确定放弃？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      goAccordion(val)
    }).catch(() => { });
  } else {
    goAccordion(val)
  }

}

const goAccordion = (val) => {
  let index = Number(val) - 1
  goOutContent.value = config[`goOutContent${val}`]
  ticketName.value = activeList.value[index].title;
  activeIndex.value = index;
  editList.value = []
  isEdit.value = false;
  getList('selectTbTicket' + activeList.value[index].interface + 'List')
}




const bindChangeRoutine = (val, name, index) => {
  if (tableData.value[index].id) {
    // 编辑
    isEdit.value = true;
    editList.value.push(tableData.value[index].id)
  }
  tableData.value[index][name] = val;

}


const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptName.value = res.user.dept.deptName;
      queryParams.value.deptId = res.user.dept.deptId;
      queryParams.value.date = selectDate.value
      getList('selectTbTicketMediumList')
    }

  })
}

const bindSubmit = () => {
  let name = '';

  let arr = []
  tableData.value.forEach(element => {
    element.deptId = queryParams.value.deptId
    if (element.id && editList.value.includes(element.id)) {
      name = 'updateTbTicket' + String(activeList.value[activeIndex.value].interface);
      methods.value[name]({ ...element }).then(res => {
        if (res.code == 200) {
          isEdit.value = false;
          proxy.$modal.msgSuccess("修改成功");
        }
      });
    } else if (!element.id) {
      element.date=moment(element.date).format("YYYY-MM-DD")
      arr.push(element)
    }
  });

  if (arr && arr.length) {
    name = 'insertTbTicket' + String(activeList.value[activeIndex.value].interface);
    methods.value[name](arr).then(res => {
      if (res.code == 200) {
        isEdit.value = false;
        proxy.$modal.msgSuccess("提交成功");
      }
    });
  }


}
const bindSelectDate = (val) => {
  queryParams.value.date=moment(val).format("YYYY-MM-DD")
  if(!activeName.value){
    getList('selectTbTicketMediumList')
  }else{
    goAccordion(activeName.value)

  }
 
  // getList(moment(val).format('YYYY-MM-DD'))
  // activeName.value = -1;
}

const onAddItem = () => {
  // now.setDate(now.getDate() + 1)
  tableData.value.push({})
}
const deleteRow = (index) => {
  if (tableData.value[index].id) {
    methods.value['deleteTbTicket' + activeList.value[activeIndex.value].interface + 'ById']({ id: tableData.value[index].id }).then(res => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess("删除成功");
        getList('selectTbTicket' + activeList.value[activeIndex.value].interface + 'List')
      }
    });

  } else {
    tableData.value.splice(index, 1)
  }

}

const init = () => {
  let strDate = moment().format("YYYY-MM-DD")
  selectDate.value = strDate;
  queryParams.value.date = strDate;
}


function lowercaseFirst(string) {
  return string.charAt(0).toLowerCase() + string.slice(1);
}

init()
getDeptId()

</script>
  
  
<style scoped \>
.container-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  color: #333;
  font-size: 14px;
}
.container-header img {
  width: 18px;
  height: 18px;
}
.container-header .header-title {
  font-size: 16px;
  font-weight: 700;
  padding: 0 12px 0 4px;
  line-height: 23px;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.text-orange {
  color: #ff920d;
}
.text-green {
  color: #33b388;
}
.accordion-title {
  font-size: 14px;
  color: #333;
  font-weight: 700;
  padding-left: 22px;
}

/* 改element */
.el-collapse {
  border-top: none;
  border-bottom: none;
}
.el-collapse-item {
  border-top: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  margin-bottom: 12px;
}
/deep/ .el-collapse-item__wrap {
  background: #fafafa !important;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #e4e4e4;
  padding: 17px;
  box-sizing: border-box;
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}
/deep/ .el-table--default .el-table__cell {
  padding: 0;
}
/deep/ .el-table--default .cell {
  height: 50px;
  line-height: 50px;
  padding: 0;
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}
.inputDeep {
  width: 100%;
  text-align: center;
}
.inputDeep >>> .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: none !important;
  width: 100%;
  box-shadow: none !important;
}

.inputDeep >>> .el-input__inner:focus {
  outline: none;
}
.inputDeep >>> .el-input__wrapper {
  height: 50px;
  line-height: 50px;
  box-shadow: none !important;
}
.inputDeep >>> .el-input__wrapper:hover {
  box-shadow: none !important;
}
.inputDeep >>> .el-textarea__inner {
  height: 50px !important;
  line-height: 50px !important;
  min-height: 50px !important;
  box-shadow: none !important;
  border: none;
}

/deep/ .datePicker .el-input__prefix{
  display: none;
}
/deep/ .datePicker .el-input__wrapper{
  border: none;
  box-shadow:none;
}
</style>